<!-- 车辆维修 -->
<template>
  <div class="page-container">
    <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="loadData" />
    <table-index :table="table" @loadData="loadData" />
  </div>
  <!-- 导入 -->
  <import-modal ref="imoportRef" action="/carInsurance/importExcel" download-import="/车辆保险导入模板.xlsx" @ok="loadData" />
  <!-- 编辑保险 -->
  <insure-edit-modal ref="insureEditRef" @ok="loadData" />
  <!-- 续保 -->
  <insure-renewal-modal ref="insureRenewalRef" @ok="loadData" />
  <!-- 退保 -->
  <insure-refund-modal ref="insureRefundRef" @ok="loadData" />
</template>

<script setup name="CarInsureList">
  import { ref, reactive, onMounted, computed } from 'vue'
  import { useTable, useFetchTableDataApi } from '@/hooks/table'
  import { usePageDict } from '@/hooks/useDict'
  import { getCarInstureList, exportCarInsture, deleteInsure } from '@/api/asset/carInsure'
  import { useExport } from '@/hooks/list'
  import insureEditModal from './components/insure-edit-modal.vue'
  import insureRenewalModal from './components/insure-renewal-modal.vue'
  import insureRefundModal from './components/insure-refund-modal.vue'
  import { Modal, Notification } from '@arco-design/web-vue'
  import useNavigate from '@/hooks/useNavigate'
  import { evalQueryParam } from '@/utils'
  import { useRoute } from 'vue-router'
  const route = useRoute()
  const routeQuery = route.query

  import dayjs from 'dayjs'

  const { navigateTo } = useNavigate()
  const imoportRef = ref(null)
  const insureEditRef = ref()
  const insureRenewalRef = ref()
  const insureRefundRef = ref()
  const dict = usePageDict('carInsuranceDict')
  // 查询条件
  const oldIdList = ref(null)
  const searchList = computed(() => {
    return [
      { label: '车牌号', prop: 'licenseNoLike', type: 'a-input' },
      {
        label: '车辆当前归属门店',
        prop: 'carSiteIdList',
        type: 'remote-select',
        attrs: {
          type: 'multiple_site_listBystaff',
          params: {
            idList: oldIdList.value,
          },
        },
      },
      {
        label: '保险状态',
        prop: 'insureStatusList',
        type: 'a-select',
        options: dict.insureStatusList,
        attrs: {
          multiple: true,
        },
      },
      {
        label: '保险单关联门店',
        prop: 'siteIdList',
        type: 'remote-select',
        attrs: {
          type: 'multiple_site_listBystaff',
        },
      },
      {
        label: '保单开始日期',
        prop: 'startDate',
        type: 'i-range-picker',
        change: (value = []) => {
          queryParam.startDateStart = value[0]
          queryParam.startDateEnd = value[1]
        },
      },
      {
        label: '保单结束日期',
        prop: 'endDate',
        type: 'i-range-picker',
        change: (value = []) => {
          queryParam.endDateStart = value[0]
          queryParam.endDateEnd = value[1]
        },
      },
      { label: '投保类型', prop: 'insureKind', type: 'a-select', options: dict.insureKindList },
      {
        label: '保险公司',
        prop: 'supplierIdList',
        type: 'remote-select',
        attrs: {
          type: 'multiple_supplier_bx',
        },
      },

      { label: '保险单号', prop: 'insureNoLike', type: 'a-input', placeholder: '请输入保险单号/保单ID' },
      { label: '车架号', prop: 'vin', type: 'a-input' },
    ]
  })

  const queryParam = reactive({
    queryDate: [],
  })

  // table 配置
  const table = useTable({
    columns: [
      { title: '保单ID', dataIndex: 'insureCode', width: 150 },
      { title: '车牌号', dataIndex: 'licenseNo' },
      { title: '车辆当前归属门店', dataIndex: 'carSiteName', width: 150 },
      { title: '保险单关联门店', dataIndex: 'siteName' },
      { title: '投保类型', dataIndex: 'insureKindStr' },
      { title: '保险公司', dataIndex: 'insureCompanyName' },
      { title: '保险单号', dataIndex: 'insureNo' },
      {
        title: '有效期',
        dataIndex: 'dateRange',
        width: 220,
        render: (record) => {
          if (record.beginDate && record.endDate) {
            return record.beginDate + ' 至 ' + record.endDate
          }
        },
      },
      { title: '保险状态', dataIndex: 'insureStatusStr' },
    ],
    operates: [
      {
        label: '详情',
        permission: 'svms:asstes:operation:car-insure.detail',
        method: (record) => {
          navigateTo(`/car-insure/detail/${record.id}`, `${record.licenseNo}-保险详情`)
        },
      },
      {
        label: '编辑',
        permission: 'svms:asstes:operation:car-insure.edit',
        show: (record) => record.insureStatus != 3,
        method: (record) => {
          insureEditRef.value.open(record)
        },
      },
      {
        label: '续保',
        permission: 'svms:asstes:operation:car-insure.renew',
        show: (record) => record.renewInsure == 1,
        method: (record) => {
          insureRenewalRef.value.open(record)
        },
      },
      {
        label: '退保',
        permission: 'svms:asstes:operation:car-insure.refund',
        show: (record) => record.insureStatus == 1,
        method: (record) => {
          insureRefundRef.value.open(record)
        },
      },
      {
        label: '删除',
        permission: 'svms:asstes:operation:car-insure.delete',
        method: (record) => {
          Modal.confirm({
            title: '删除保单',
            simple: true,
            cancelText: '取消',
            okText: '确认',
            bodyStyle: {
              'text-align': 'center',
            },
            content: '删除后，不支持恢复，是否确认删除？',
            onOk: () => {
              deleteInsure({ id: record.id }).then(() => {
                Notification.success({
                  content: '删除成功',
                  closable: true,
                  duration: 3000,
                })
                loadData()
              })
            },
          })
        },
      },
    ],
    buttons: [
      {
        mode: 'import',
        label: '导入',
        permission: 'svms:asstes:operation:car-insure.import',
        method: () => {
          imoportRef.value.show()
        },
      },
      {
        mode: 'import',
        label: '导出',
        permission: 'svms:asstes:operation:car-insure.export',
        method: () => handleExport(),
      },
      {
        type: 'primary',
        icon: 'plus',
        label: '新增',
        permission: 'svms:asstes:operation:car-insure.create',
        method: () => {
          navigateTo('/car-insure/create')
        },
      },
    ],
  })
  // 列表接口调用
  const loadData = useFetchTableDataApi(table, queryParam, getCarInstureList)

  // 导出事件
  const handleExport = () => {
    useExport(exportCarInsture, queryParam)
  }

  onMounted(() => {
    // 保险单关联门店
    if (routeQuery.siteIdList) {
      let siteIdList = evalQueryParam(routeQuery.siteIdList)
      siteIdList = siteIdList.map((item) => String(item))
      queryParam.siteIdList = siteIdList
      oldIdList.value = siteIdList
    }
    if (routeQuery.licenseNoLike) {
      queryParam.licenseNoLike = routeQuery.licenseNoLike
    }
    // 保单开始时间
    if (routeQuery.startTime && routeQuery.endTime) {
      let startTime = routeQuery.startTime
      let endTime = routeQuery.endTime
      queryParam.startDateStart = startTime
      queryParam.startDateEnd = endTime
      queryParam.startDate = [startTime, endTime]
    }
    loadData()
  })
</script>

<style lang="less" scoped></style>
